<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			div {
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div onclick="pdf()">下载pdf</div>
		<div onclick="word()">下载word</div>
		<div onclick="excel()">下载xlsx</div>
		<div onclick="jpg()">下载图片</div>
	</body>
	<script>
		function pdf() {
			let url = 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/file/1ec86ed1161e4fdebb436189a7ebe893fm.pdf'
			let list = {
				url,
				name: '阿西吧',
				type: 'pdf'
			}
			downloadType(list)
		}

		function word() {
			let url = 'http://xx.docx'
			let list = {
				url,
				name: 'word文件----你再说舌鸟么？',
				type: 'word'
			}
			downloadType(list)
		}

		function excel() {
			let url = 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/file/device.xlsx'
			let list = {
				url,
				name: 'excel文件---还有谁？',
				type: 'xlsx'
			}
			downloadType(list)
		}

		function jpg() {
			let url = 'https://fire-system.oss-cn-beijing.aliyuncs.com/web/yijiance/24gl-network%402x.png'
			let list = {
				url,
				name: '图片',
				type: 'img'
			}
			downloadType(list)
		}

		function downloadType(data) {
			switch (data.type) {
				case 'img':
					return downloadImg(data)
				case 'pdf':
					return downloadFile(data)
				case 'word':
					return downloadFile(data)
				case 'xlsx':
					return downloadFile(data)
			}
		}
		/**
		 * quality 图片质量
		 */
		function downloadImg(data, quality = 0.9) {
			pathToBase64(data.url, quality).then(res => {
				const link = document.createElement('a')
				link.href = res
				link.setAttribute('download', data.name)
				document.body.appendChild(link)
				link.click()
				link.remove()
			}).catch(err => {
				console.log(err)
			})
		}

		function downloadFile(data) {
			fetchDownloadFile(data)
		}

		function fetchDownloadFile(data) {
			fetch(data.url, {
					method: 'get',
					mode: 'cors',
				})
				.then(response => response.blob())
				.then(res => {
					const downloadUrl = window.URL.createObjectURL(
						//new Blob() 对后端返回文件流类型处理
						new Blob([res], {
							type: data.type == 'pdf' ? 'application/pdf' : data.type == 'word' ?
								'application/msword' : data.type == 'xlsx' ? 'application/vnd.ms-excel' : ''
						})
					)
					//word文档为msword,pdf文档为pdf
					const link = document.createElement('a')
					link.href = downloadUrl
					link.setAttribute('download', data.name)
					document.body.appendChild(link)
					link.click()
					link.remove()
				}).catch(error => {
					window.open(url)
				})
		};

		//获取Base64且压缩图片
		function pathToBase64(url, quality = 1, width = 1, height = 1) {
			return new Promise((resolve, reject) => {
				let image = new Image()
				image.onload = function () {
					let canvas = document.createElement('canvas')
					canvas.width = image.width / width
					canvas.height = image.height / height
					canvas.getContext('2d').drawImage(image, 0, 0)
					let result = canvas.toDataURL('image/jpeg', quality)
					resolve(result)
				}
				image.setAttribute('crossOrigin', 'Anonymous')
				image.src = url
				image.onerror = () => {
					reject(new Error('urlToBase64 error'))
				}
			})
		}

		function directDownload(url, filename) {
			const link = document.createElement('a')
			link.href = url
			link.setAttribute('download', filename)
			document.body.appendChild(link)
			link.click()
			link.remove()
		}
	</script>
</html>